import { reactive } from 'vue'

// 全局loading状态
const loadingState = reactive({
  visible: false,
  title: 'DevOps自动化运维系统',
  tip: '加载中，请稍候...',
  showProgress: false,
  progress: 0
})

// 加载队列计数器，防止嵌套调用导致过早隐藏
let loadingCounter = 0

class LoadingService {
  /**
   * 显示加载界面
   * @param {Object} options - 配置选项
   * @param {string} options.title - 标题
   * @param {string} options.tip - 提示文字
   * @param {boolean} options.showProgress - 是否显示进度条
   * @param {boolean} options.force - 强制显示，忽略计数器
   */
  show(options = {}) {
    if (!options.force) {
      loadingCounter++
    }
    
    loadingState.visible = true
    loadingState.title = options.title || 'DevOps自动化运维系统'
    loadingState.tip = options.tip || '加载中，请稍候...'
    loadingState.showProgress = options.showProgress || false
    loadingState.progress = options.progress || 0
  }

  /**
   * 隐藏加载界面
   * @param {boolean} force - 强制隐藏，忽略计数器
   */
  hide(force = false) {
    if (force) {
      // 强制隐藏，重置计数器
      loadingCounter = 0
      loadingState.visible = false
    } else {
      // 正常隐藏，使用计数器
      loadingCounter = Math.max(0, loadingCounter - 1)
      if (loadingCounter === 0) {
        loadingState.visible = false
      }
    }
    
    // 延迟重置状态，等待过渡动画完成
    if (!loadingState.visible) {
      setTimeout(() => {
        loadingState.progress = 0
      }, 300)
    }
  }

  /**
   * 重置计数器并隐藏加载界面（用于错误恢复）
   */
  forceHide() {
    this.hide(true)
  }

  /**
   * 更新进度
   * @param {number} progress - 进度值 (0-100)
   */
  setProgress(progress) {
    loadingState.progress = Math.min(100, Math.max(0, progress))
  }

  /**
   * 更新提示文字
   * @param {string} tip - 提示文字
   */
  setTip(tip) {
    loadingState.tip = tip
  }

  /**
   * 获取loading状态
   */
  getState() {
    return loadingState
  }

  /**
   * 显示带进度的加载界面
   * @param {Object} options - 配置选项
   */
  showWithProgress(options = {}) {
    this.show({
      ...options,
      showProgress: true
    })
  }

  /**
   * 模拟进度加载
   * @param {number} duration - 持续时间(毫秒)
   * @param {Function} callback - 完成回调
   */
  async simulateProgress(duration = 3000, callback) {
    this.showWithProgress()
    const steps = 100
    const interval = duration / steps

    for (let i = 0; i <= steps; i++) {
      await new Promise(resolve => setTimeout(resolve, interval))
      this.setProgress(i)
      
      // 更新不同阶段的提示文字
      if (i < 30) {
        this.setTip('正在初始化...')
      } else if (i < 60) {
        this.setTip('正在处理数据...')
      } else if (i < 90) {
        this.setTip('即将完成...')
      } else {
        this.setTip('加载完成！')
      }
    }

    if (callback) {
      await callback()
    }
    
    this.hide()
  }
}

// 导出单例
export const loadingService = new LoadingService()

// 导出状态供组件使用
export { loadingState }
